<script>
function getAlert(){
	$('.alert').alert();
}
Ext.onReady(function(){	
	
	var destroy_comp = function(id){
		if (typeof (Ext.getCmp(id) ) != 'undefined'){
			Ext.getCmp(id).destroy();
		}
	}
	
	destroy_comp("m_groups");
	destroy_comp("gridGroups");
	destroy_comp("group_id");
	destroy_comp("group_name");
	destroy_comp("group_desc");
	destroy_comp("group_aktif");
	
	var win,task;
	
	var m_groups = new Ext.data.Store({
		id: 'm_groups',
		proxy: new Ext.data.HttpProxy({
			url: '<?php echo base_url('c_groups');?>',
			method: 'POST'
		}),
		baseParams : {task : 'LIST', start : 0, limit : 15 },
		reader: new Ext.data.JsonReader({
			root: 'results',
			totalProperty: 'total',
			idProperty: 'group_id'
		},[
			{name: 'group_id',     type: 'int',     mapping: 'group_id'},
			{name: 'group_name',   type: 'varchar', mapping: 'group_name'},
			{name: 'group_desc',   type: 'varchar', mapping: 'group_desc'},
			{name: 'group_aktif',  type: 'varchar', mapping: 'group_aktif'}
		])
	});
	
	var group_id  = new Ext.form.TextField({
				fieldLabel: 'ID',
				id  : 'group_id',
				name: 'group_id',
				hidden: true
			});	
	var group_name = new Ext.form.TextField({
				fieldLabel: 'Nama Group',
				name: 'group_name',
				id  : 'group_name'
			});
	var keterangan = new Ext.form.TextField({
				fieldLabel: 'Keterangan',
				id  : 'group_desc',
				name: 'group_desc'
			});
	
	var form_groups = new Ext.FormPanel({
		frame:true,
		id:'form_groups',
		bodyStyle:'padding:5px 5px 0',
		width: 400,
		autoHeight: true,
		fieldDefaults: {
			labelWidth: 250
		},
		items :[group_id, group_name, keterangan],
		buttons: [{
			text: 'Simpan',
			handler: function(){			
				if(form_groups.getForm().isDirty()){
					Ext.Ajax.request({  
						waitMsg: 'Mohon tunggu...',
						url: 'c_groups',
						params: {
							task        : task,
							group_id    : group_id.getValue(),
							group_name  : group_name.getValue(),
							keterangan  : keterangan.getValue()
						}, 
						success: function(response){             
							var result = eval(response.responseText);
							switch(result){
								case 0:
									Ext.MessageBox.alert('Information','Maaf, data yang username tersebut sudah terdaftar !');
									break;
								case 1:
									reset();
									m_groups.reload();
									Ext.MessageBox.alert('Simpan Berhasil ','Data berhasil disimpan');
									win.hide();
									break;
								default:
									Ext.MessageBox.show({
									   title: 'Warning',
									   msg: 'Data tidak bisa disimpan',
									   buttons: Ext.MessageBox.OK,
									   animEl: 'save',
									   icon: Ext.MessageBox.WARNING
									});
								break;
							}        
						},
						failure: function(response){
							var result=response.responseText;
							Ext.MessageBox.show({
										   title: 'Error',
										   msg: 'Tidak bisa terhubung dengan database !.',
										   buttons: Ext.MessageBox.OK,
										   animEl: 'database',
										   icon: Ext.MessageBox.ERROR
							});	
						}                      
					});
				} else {
					Ext.MessageBox.alert('ERROR','Maaf, Data yang masukan belum lengkap!');
				}
			}
		},{
			text: 'Batal',
			handler : function (){
				reset();
				win.hide();
			}			
		}]
	});
	function reset(){
		group_id.setValue("");
		group_name.setValue("");
		keterangan.setValue("");
	}
	win = new Ext.Window({
		title: 'Form Groups',
		closable: true,
		closeAction: 'hide',
		width: 420,
		autoHeight: true,
		layout: 'fit',
		resizable: false,
		modal: true,
		items: form_groups
	});
	
	var cm_groups = new Ext.grid.ColumnModel([
		{
			header: 'ID',
			dataIndex: 'group_id',
			width: 150,
			sortable: true,
			hidden: true
		},{
			header: 'Nama Group',
			dataIndex: 'group_name',
			width: 150,
			sortable: true
		},{
			header: 'Keterangan',
			dataIndex: 'group_desc',
			width: 150,
			sortable: true
		},{
			header: 'Group Aktif',
			dataIndex: 'group_aktif',
			width: 150,
			sortable: true,
			hidden: true
		}	
	]);
	
	var gridGroups =  new Ext.grid.EditorGridPanel({
		id:'gridGroups',
		el:'gridGroups',
		title:'Daftar Groups',
		autoHeight: true,
		store: m_groups,
		cm   : cm_groups,
		enableColLock:false,
		width: "100%",
		clicksToEdit:2,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
		viewConfig: { forceFit:true },
		bbar: new Ext.PagingToolbar({
			pageSize: 10,
			store: m_groups,
			displayInfo: true
		}),
		
		tbar: [
		{
			text    : 'Tambah',
			iconCls : 'exticon-add',
			handler : function(){
				task = "SAVE";
				win.show();
			}
		},'-',{
			text    : 'Ubah',
			iconCls : 'exticon-edit',
			handler : function(){
				task = "EDIT";
				var records = gridGroups.getSelectionModel().getSelected();
				if(typeof(records) === "undefined"){
					Ext.MessageBox.show({
						title           : 'Error',
						msg             : 'Maaf, Tidak ada data yang dipilih untuk di Ubah !',
						icon            : Ext.MessageBox.ERROR,
						buttons         : Ext.MessageBox.OK
					});
				} else {
					group_id.setValue(records.data.group_id);
					group_name.setValue(records.data.group_name);
					keterangan.setValue(records.data.group_desc);
					win.show();
				}
			}
		},'-',{
			text    : 'Hapus',
			iconCls : 'exticon-delete',
			handler : function(){
				var records = gridGroups.getSelectionModel().getSelected();
				if(typeof(records) === "undefined"){
					Ext.MessageBox.show({
						title           : 'Error',
						msg             : 'Maaf , Tidak ada data yang dipilih untuk di Hapus !',
						icon            : Ext.MessageBox.ERROR,
						buttons         : Ext.MessageBox.OK
					});
				} else {
					Ext.Msg.confirm('Warning','Apakah anda yakin menghapus data ini ?', function(btn){
					if (btn == 'yes'){
						m_groups.reload();
						task = "DELETE";
						var user_id = records.data.user_id;
						Ext.Ajax.request({  
							waitMsg: 'Mohon tunggu...',
							url: 'c_groups',
							params: {
								task        : task,
								user_id     : records.data.group_id
							}, 
							success: function(response){             
								var result = eval(response.responseText);
								switch(result){
									case 1:
										m_groups.reload();
										// Ext.MessageBox.alert('Simpan Berhasil ','Data berhasil di hapus');
										getAlert();
										break;
									default:
										Ext.MessageBox.show({
										   title: 'Warning',
										   msg: 'Data tidak bisa disimpan',
										   buttons: Ext.MessageBox.OK,
										   animEl: 'save',
										   icon: Ext.MessageBox.WARNING
										});
									break;
								}        
							},
							failure: function(response){
								var result=response.responseText;
								Ext.MessageBox.show({
											   title: 'Error',
											   msg: 'Tidak bisa terhubung dengan database !.',
											   buttons: Ext.MessageBox.OK,
											   animEl: 'database',
											   icon: Ext.MessageBox.ERROR
								});	
							}                      
						});
					}
					});
				}
			}
		}, new Ext.app.SearchField({
			store: m_groups,
			listeners:{
				specialkey: function(f,e){
					if(e.getKey() == e.ENTER){
						gridGroups.baseParams={start:0, limit:15};
		            }
				},
				render: function(c){
				Ext.get(this.id).set({qtitle: 'Cari'});
				}
			},
			width: 120
		})
		]
	});
	gridGroups.render();
	m_groups.load();
});
</script>
<div id ="getAlert()"></>
<div class="page-header color1"><h3>DAFTAR GROUPS</h3></div>
<div id="gridGroups"></div>